<template>
	<view>
		<view class="top">
			<u-sticky h5-nav-height="0">
				<u-tabs-swiper :current="current" ref="tabs" active-color="#FF423F" :list="tabs" :is-scroll="false"
					:bold="false" @change="tabsChange"></u-tabs-swiper>
			</u-sticky>
		</view>
		<swiper :current="swiperCurrent" @transition="transition" :style="{height:navHeight+'px'}"
			@animationfinish="animationfinish">
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="width: 100%; height: 98%;" @scrolltolower="onreachBottom">
					<view class="item" v-for="(item,index) in list1" :key="index" @click="gopage(item)">
						<view class="order_top" v-if="item.status == 0">
							<view class="orderid">
								订单编号：{{item.order_id}}
							</view>
							<view class="type">
								待发货
							</view>
						</view>
						<view class="order_top" v-else-if="item.status == 1">
							<view class="orderid">
								订单编号：{{item.order_id}}
							</view>
							<view class="type">
								待收货
							</view>
						</view>
						<view class="order_top" v-else-if="item.status == 5">
							<view class="orderid">
								订单编号：{{item.order_id}}
							</view>
							<view class="type">
								已取消
							</view>
						</view>
						<view class="order_top" v-else>
							<view class="orderid">
								订单编号：{{item.order_id}}
							</view>
							<view class="type">
								已完成
							</view>
						</view>
						<view class="type" v-else></view>
						<view class="shopBox">
							<view class="imgBox">
								<u-image width="140rpx" height="140rpx" :src="item.producntInfo[0].image"></u-image>
							</view>
							<view class="right">
								<view class="top">
									<text class="name">{{item.producntInfo[0].store_name}}</text>
									<text class="jiage">FCFA{{item.producntInfo[0].price}}</text>
								</view>
								<view class="center">
									<text class="guige">{{item.producntInfo[0].attrInfo.suk}}</text>
									<text class="shuliang">x{{item.total_num}}</text>
								</view>
							</view>
						</view>
						<view class="btm">
							<text class="heji">合计: <text class="zongjia">FCFA{{item.pay_price}}</text></text>
							<view class="quxiaodingdan" v-if="item.paid == 1 && item.status == 0 "
								@click.stop="quxiaodd(item,index,list1)">
								取消订单
							</view>
							<view class="redbtn" v-if="item.paid == 0 && item.status !== 5 " @click.stop="lijifk(item)">
								立即付款
							</view>
							<view class="redbtn" v-if="item.status == 1">
								确认收货
							</view>
							<view class="redbtn" v-if="item.status == 5" @click="scdd(item.order_id)">
								删除订单
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="width: 100%; height: 98%;" @scrolltolower="onreachBottom">
					<view class="item" v-for="(item,index) in list2" :key="index" @click="gopage(item)">
					<view class="order_top" v-if="item.status == 0">
						<view class="orderid">
							订单编号：{{item.order_id}}
						</view>
						<view class="type">
							待发货
						</view>
					</view>
					<view class="order_top" v-else-if="item.status == 1">
						<view class="orderid">
							订单编号：{{item.order_id}}
						</view>
						<view class="type">
							待收货
						</view>
					</view>
					<view class="order_top" v-else-if="item.status == 5">
						<view class="orderid">
							订单编号：{{item.order_id}}
						</view>
						<view class="type">
							已取消
						</view>
					</view>
					<view class="type" v-else>已完成</view>
						<view class="shopBox">
							<view class="imgBox">
								<u-image width="140rpx" height="140rpx" :src="item.producntInfo[0].image"></u-image>
							</view>
							<view class="right">
								<view class="top">
									<text class="name">{{item.producntInfo[0].store_name}}</text>
									<text class="jiage">FCFA{{item.producntInfo[0].price}}</text>
								</view>
								<view class="center">
									<text class="guige">{{item.producntInfo[0].attrInfo.suk}}</text>
									<text class="shuliang">x{{item.total_num}}</text>
								</view>
							</view>
						</view>
						<view class="btm">
							<text class="heji">合计: <text class="zongjia">FCFA{{item.pay_price}}</text></text>
							<view class="quxiaodingdan" v-if="item.paid == 1 && item.status !== 5 "
								@click.native.stop="quxiaodd(item,index,list1)">
								取消订单
							</view>
							<view class="redbtn" v-if="item.paid == 0 && item.status !== 5 "
								@click.native.stop="lijifk(item)">
								立即付款
							</view>
							<view class="redbtn" v-if="item.status ==2">
								确认收货
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="width: 100%; height: 98%;" @scrolltolower="onreachBottom">
					<view class="item" v-for="(item,index) in list3" :key="index">
						<view class="order_top" v-if="item.status == 0">
							<view class="orderid">
								订单编号：{{item.order_id}}
							</view>
							<view class="type">
								待发货
							</view>
						</view>
						<view class="order_top" v-else-if="item.status == 1">
							<view class="orderid">
								订单编号：{{item.order_id}}
							</view>
							<view class="type">
								待收货
							</view>
						</view>
						<view class="order_top" v-else-if="item.status == 5">
							<view class="orderid">
								订单编号：{{item.order_id}}
							</view>
							<view class="type">
								已取消
							</view>
						</view>
						<view class="type" v-else>已完成</view>
						<view class="shopBox" @click="gopage(item)">
							<view class="imgBox">
								<u-image width="140rpx" height="140rpx" :src="item.producntInfo[0].image"></u-image>
							</view>
							<view class="right">
								<view class="top">
									<text class="name">{{item.producntInfo[0].store_name}}</text>
									<text class="jiage">FCFA{{item.producntInfo[0].price}}</text>
								</view>
								<view class="center">
									<text class="guige">{{item.producntInfo[0].attrInfo.suk}}</text>
									<text class="shuliang">x{{item.total_num}}</text>
								</view>
							</view>
						</view>
						<view class="btm">
							<text class="heji">合计: <text class="zongjia">FCFA{{item.pay_price}}</text></text>
							<view class="quxiaodingdan" v-if="item.paid == 0 && item.status !== 5 "
								@click.stop="quxiaodd(item,index,list1)">
								取消订单
							</view>
							<view class="redbtn" v-if="item.paid == 0 && item.status !== 5 " @click.stop="lijifk(item)">
								立即付款
							</view>
							<view class="redbtn" v-if="item.status == 1" @click="shouhuo(item.id)">
								确认收货
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="width: 100%; height: 98%;" @scrolltolower="onreachBottom">
					<view class="item" v-for="(item,index) in list4" :key="index" @click="gopage(item)">
						<view class="order_top" v-if="item.status == 0">
							<view class="orderid">
								订单编号：{{item.order_id}}
							</view>
							<view class="type">
								待发货
							</view>
						</view>
						<view class="order_top" v-else-if="item.status == 1">
							<view class="orderid">
								订单编号：{{item.order_id}}
							</view>
							<view class="type">
								待收货
							</view>
						</view>
						<view class="order_top" v-else-if="item.status == 5">
							<view class="orderid">
								订单编号：{{item.order_id}}
							</view>
							<view class="type">
								已取消
							</view>
						</view>
						<view class="order_top"  v-else>
							<view class="orderid">
								订单编号：{{item.order_id}}
							</view>
							<view class="type">
								已完成
							</view>
						</view>
						<view class="shopBox">
							<view class="imgBox">
								<u-image width="140rpx" height="140rpx" :src="item.producntInfo[0].image"></u-image>
							</view>
							<view class="right">
								<view class="top">
									<text class="name">{{item.producntInfo[0].store_name}}</text>
									<text class="jiage">FCFA{{item.producntInfo[0].price}}</text>
								</view>
								<view class="center">
									<text class="guige">{{item.producntInfo[0].attrInfo.suk}}</text>
									<text class="shuliang">x{{item.total_num}}</text>
								</view>
							</view>
						</view>
						<view class="btm">
							<text class="heji">合计: <text class="zongjia">FCFA{{item.pay_price}}</text></text>
							<view class="quxiaodingdan" v-if="item.paid == 0 && item.status !== 5 "
								@click.stop="quxiaodd(item,index,list1)">
								取消订单
							</view>
							<view class="redbtn" v-if="item.paid == 0 && item.status !== 5 " @click.stop="lijifk(item)">
								立即付款
							</view>
							<view class="redbtn" v-if="item.status == 1">
								确认收货
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>

		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [{
						name: "全部"
					},
					{
						name: '待发货',

					}, {
						name: '待收货',

					}, {
						name: "已完成"
					}
				],
				current: 0,
				swiperCurrent: 0,
				src: 'https://cdn.uviewui.com/uview/example/fade.jpg',
				navHeight: 0,
				list1: [],
				list2: [],
				list3: [],
				list4: [],
				list5: [],
				info: null,
				keyList: [],
				first: false
			};
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that.pH = res.windowHeight //windoHeight为窗口高度，主要使用的是这个
					that.navHeight = that.pH - 60
				}
			})
		},
		onLoad(val) {
			console.log(val);
			this.tabsChange(Number(val.val))

			uni.getStorage({
				key: 'userinfo',
				success: (res) => {
					this.info = res.data
					this.getlist(0)
					this.getlist(1)
					this.getlist(2)
					this.getlist(3)
					this.first = true;
					uni.showLoading({
						title: '正在加载',
						mask: true,
					})
				}
			})
		},
		onShow() {
			if (this.first) {
				this.getlist(0)
				this.getlist(1)
				this.getlist(2)
				this.getlist(3)

				uni.showLoading({
					title: '正在加载',
					mask: true,
				})
			}
		},
		methods: {
			scdd(orderid){
				console.log(orderid);
				uni.request({
					url: this.$AJAX_URL + 'order/del_order',
					method: 'POST',
					data: {
						order_id: orderid
					},
					success: (res) => {
						if (res.data.code == 200) {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 1000
							});
						}
					}
				})
			},
			shouhuo(id) {
				console.log(id);
				uni.request({
					url: this.$AJAX_URL + 'order/take_delivery',
					method: 'POST',
					data: {
						id: id
					},
					success: (res) => {

						if (res.data.code == 200) {
							uni.showToast({
								title: '确认收货成功',
								icon: 'none',
								duration: 1000
							});
						}
					}
				})
			},
			getlist(type) {
				console.log(type);
				uni.request({
					url: this.$AJAX_URL + 'order/order_list',
					method: 'POST',
					data: {
						uid: this.info.uid,
						type: type
					},
					success: (res) => {

						// console.log(res);
						this.keyList = []
						switch (type) {
							case 0:
								console.log("全部");
								console.log(res.data.data);
								this.list1 = res.data.data
								this.$nextTick(function() {
									uni.hideLoading()
								})
								break;
							case 1:
								console.log("待发货");
								console.log(res.data.data);
								this.list2 = res.data.data
								break;
							case 2:
								console.log('待收货');
								console.log(res.data.data[0].status);
								this.list3 = res.data.data
								break;
							case 3:
								console.log('已完成');
								console.log(res.data.data);
								this.list4 = res.data.data
								break;
							case 5:
								this.list5 = res.data.data

								break;
							default:
								break;
						}

						for (var i = 0; i < res.data.data.length; i++) {
							for (let key in res.data.data[i].producntInfo) {
								this.keyList.push(key)
							}
						}

					}
				})
			},
			tabsChange(index) {
				console.log(index);
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.tabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			onreachBottom(e) {
				// console.log(e);
			},
			gopage(item) {
				console.log(item);
				console.log(item);
				console.log(item);
				console.log(item);
				switch (item.status) {
					case 0:
						if (item.paid == 0) {
							uni.navigateTo({
								url: '../daifukuan/daifukuan?id=' + item.order_id
							})
						} else {
							uni.navigateTo({
								url: '../daifahuo/daifahuo?id=' + item.order_id
							})
						}
						break;
						// case 2:
						// 	if (item.paid == 0) {
						// 		uni.navigateTo({
						// 			url: '../daifukuan/daifukuan?id=' + item.order_id
						// 		})
						// 	} else {
						// 		uni.navigateTo({
						// 			url: '../yiwancheng/yiwancheng?id=' + item.order_id
						// 		})
						// 	}
						// 	break;
					case 1:
						if (item.paid == 0) {
							uni.navigateTo({
								url: '../daifukuan/daifukuan?id=' + item.order_id
							})
						} else {
							uni.navigateTo({
								url: '../daishouhuo/daishouhuo?id=' + item.order_id
							})
						}
						break;
					default:
						if (item.status !== 5 && item.paid == 0) {
							uni.navigateTo({
								url: '../daifukuan/daifukuan?id=' + item.order_id
							})
						}
						if (item.status === 3) {
							uni.navigateTo({
								url: '../yiwancheng/yiwancheng?id=' + item.order_id
							})
						}
						break;
				}
			},
			quxiaodd(item, index, arrlist) {
				uni.request({
					url: this.$AJAX_URL + 'order/user_cancel_order',
					method: 'POST',
					data: {
						uid: this.info.uid,
						order_id: item.order_id
					},
					success: (res) => {
						console.log(res);
						if (res.data.code == 200) {
							this.$u.toast(res.data.msg)
							arrlist.splice(index, 1)
						}
						this.$u.toast(res.data.msg)
					}
				})
			},
			lijifk(item) {
				// console.log(item);
				uni.request({
					url: this.$AJAX_URL + 'order/pay_order',
					method: 'POST',
					data: {
						uid: this.info.uid,
						order_id: item.order_id
					},
					success: (res) => {
						console.log(res);
						if (res.data.code == 200) {
							var data = res.data.data.result.jsConfig
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: data.timeStamp,
								nonceStr: data.nonceStr,
								package: data.package,
								paySign: data.paySign,
								signType: "MD5",
								complete: (e) => {
									console.log(e);
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f7f7f7;
	}

	.item {
		// height: 332rpx;
		background: #FFFFFF;
		margin-top: 10rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		overflow: hidden;

		.order_top {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.orderid {
				font-size: 26rpx;
			}
		}

		.type {
			color: #FF423F;
			font-size: 30rpx;
			margin-top: 20rpx;
		}

		.shopBox {
			display: flex;
			margin-top: 10rpx;
			border-bottom: 1px solid #E6E6E6;
			padding-bottom: 20rpx;

			.imgBox {
				width: 140rpx;
				border-radius: 10rpx;
				overflow: hidden;
			}

			.right {
				width: 570rpx;
				padding-left: 20rpx;

				.top {
					.name {
						font-size: 32rpx;
						color: #010101;
					}

					.jiage {
						font-size: 32rpx;
						color: #000000;
						float: right;
					}
				}

				.center {
					margin-top: 10rpx;

					.guige {
						font-size: 24rpx;
						color: #999999;
					}

					.shuliang {
						font-size: 24rpx;
						color: #999999;
						float: right;
					}
				}
			}
		}

		.btm {
			height: 92rpx;
			width: 100%;
			line-height: 92rpx;
			position: relative;

			.heji {
				font-size: 24rpx;
				color: #333333;

				.zongjia {
					font-size: 32rpx;
					color: #000000;
				}
			}

			.quxiaodingdan {
				font-size: 26rpx;
				color: #999999;
				width: 160rpx;
				height: 52rpx;
				border: 1px solid #999999;
				border-radius: 26rpx;
				position: absolute;
				top: 20rpx;
				right: 5rpx;
				text-align: center;
				line-height: 52rpx;
			}

			.redbtn {
				font-size: 26rpx;
				color: #FF423F;
				width: 160rpx;
				height: 52rpx;
				border: 1px solid #FF423F;
				border-radius: 26rpx;
				position: absolute;
				top: 20rpx;
				right: 0rpx;
				text-align: center;
				line-height: 52rpx;
			}
		}

	}
</style>
